$(function() {
  // 1. 监控区域
  (function() {
    $('.monitor .tabs a').on('click', function() {
      // 1-1: 多选一, 排他思想, 干掉其他人,成就自己

      $(this).addClass('active').siblings().removeClass('active')

      //1-2: 获取index
      var index = $(this).index()

      // 1-3: 多选一, 排他思想.让对应index的模块显示出来, 其他模块隐藏
      $('.monitor .content').eq(index).show().siblings('.content').hide()
    })
    // 默认让第一个选中
    $('.monitor .tabs a').eq(0).click()

    // 2: 无缝滚动
    // 2-1: 准备两份数据
    $('.marquee .row').each(function(index, item) {
      $(item).parent().append($(item).clone())
    })
    // 2-2: 动画或者js实现滚动 作业

  })();

  // 2.点位区域
  (function() {
    //1. echarts四部曲
    // 1-1: 准备一个有宽高的盒子
    // 1-2: 初始化该盒子
    // 1-3: 修改配置项
    // 1-4: 设置配置项  
    var myChart = echarts.init($('.pie')[0])
    var option = {
      color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
      series: [{
        name: '点位统计',
        type: 'pie',
        radius: ['20%', '80%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 0
        },
        label: {
          fontSize: 10
        },
        labelLine: {
          show: true,
          length: 0,
          length2: 8
        },
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
        ]
      }]
    };

    myChart.setOption(option)
    window.addEventListener('resize', function() {
      console.log(myChart)
      myChart.resize()
    })
  })();

  // 3.地图区域留白

  // 4.统计模块  
  (function() {
    var myChart = echarts.init($('.bar')[0])
    var item = {
      name: '',
      value: 1200,
      // 1. 修改当前柱形的样式
      itemStyle: {
        color: '#254065'
      },
      // 2. 鼠标放到柱子上不想高亮显示
      emphasis: {
        itemStyle: {
          color: '#254065'
        }
      },
      // 3. 鼠标经过柱子不显示提示框组件
      tooltip: {
        show: true,
        extraCssText: 'opacity: 0'
      }
    };
    // 1. 实例化对象
    option = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: '#00fffb' }, // 0 起始颜色
          { offset: 1, color: '#0061ce' } // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: 'item'
      },
      grid: {
        left: '0%',
        rigt: '0%',
        top: '3%',
        bottom: '0%',
        containLabel: true,
        // 是否显示直角坐标系网格
        show: true,
        //grid 四条边框的颜色
        borderColor: 'rgba(0, 240, 255, 0.3)'
      },
      xAxis: [{
        type: 'category',
        data: [
          '上海',
          '广州',
          '北京',
          '深圳',
          '合肥',
          '',
          '......',
          '',
          '杭州',
          '厦门',
          '济南',
          '成都',
          '重庆'
        ],
        axisTick: {
          // 把x轴的刻度隐藏起来
          show: false
        },
        axisLabel: {
          color: '#4c9bfd'
        },
        // x轴这条线的颜色样式
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
            // width: 3
          }
        }
      }],
      yAxis: [{
        type: 'value',
        axisTick: {
          alignWithLabel: false,
          // 把y轴的刻度隐藏起来
          show: false
        },
        axisLabel: {
          color: '#4c9bfd'
        },
        // y轴这条线的颜色样式
        axisLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
            // width: 3
          }
        },
        // y轴分割线的颜色样式
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 240, 255, 0.3)'
          }
        }
      }],
      series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          item,
          item,
          item,
          900,
          750,
          600,
          480,
          240
        ]
      }]
    };

    myChart.setOption(option)

    window.addEventListener('resize', function() {
      myChart.resize()
    })
  })();

  // 5. 销售统计
  (function() {
    // 5-1: 表格
    var myChart = echarts.init($('.line').get(0))
    var option = {
      legend: {
        right: '20%',
        top: '2%',
        data: ['预期销售额', '实际销售额'],
        textStyle: {
          color: '#2b5fa2'
        }
      },
      tooltip: {
        trigger: 'axis',
        show: true,
      },
      grid: {
        show: true,
        left: '0%',
        right: '4%',
        bottom: '3%',
        top: '20%',
        containLabel: true,
        borderColor: '#002039'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ],
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#2b5fa2'
        },
        axisLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        axisTick: {
          show: true
        },
        axisLabel: {
          color: '#2b5fa2'
        },
        axisLine: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#2b5fa2'
          }
        }
      },
      color: ['red', 'skyblue'],
      series: [{
          name: '预期销售额',
          type: 'line',
          data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
          smooth: true
        },
        {
          name: '实际销售额',
          type: 'line',
          data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          smooth: true
        }
      ]
    };

    myChart.setOption(option)

    window.addEventListener('resize', function() {
      myChart.resize()
    })

    // 5-2: 折线图动起来
    // 5-2-1: 绑定点击事件
    $('.sales .caption a').on('click', function() {
      $(this).addClass('active').siblings().removeClass('active')

      // 5-2-2: 绑定点击事件
      var data = {
        year: [
          [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
          [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
          [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
          [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
          [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
          [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
          [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
          [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
      }

      // 5-2-3: 获取数据名称
      var key = $(this).data('key')
      var value = data[key]
      // 5-2-4: 修改数据
      option.series[0]['data'] = value[0]
      option.series[1]['data'] = value[1]
      index = $(this).index('.sales .caption a')
      myChart.setOption(option)

    })

    // 5-3: 自动播放
    var index = 0

    function autoPlay() {
      if (index >= $('.sales .caption a').length) {
        index = 0
      }
      $('.sales .caption a').eq(index).trigger('click')
      index += 1
    }
    var id = setInterval(autoPlay, 1000)

    // 5-4: 经过停止
    $('.sales').hover(function() {
      if (id) {
        clearInterval(id)
        id = null
      } else {
        id = setInterval(autoPlay, 1000)
      }
    })
  })();


  // 6. 雷达图
  (function() {
    var myChart = echarts.init($('.radar')[0])
    var option = {
      tooltip: {
        show: true,
        position: ['45%', '10%']
      },
      radar: {
        radius: '48%',
        indicator: [
          { name: '机场', max: 100 },
          { name: '商场', max: 100 },
          { name: '火车站', max: 100 },
          { name: '汽车站', max: 100 },
          { name: '地铁', max: 100 }
        ],
        shape: 'circle',
        splitNumber: 5,
        axisName: {
          color: '#eee'
        },
        splitLine: {
          lineStyle: {
            color: '#eee'
          }
        },
        splitArea: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#eee'
          }
        }
      },
      series: [{
        name: 'Beijing',
        type: 'radar',
        label: {
          show: true
        },
        itemStyle: {
          color: '#fff'
        },
        lineStyle: {
          width: 3,
          color: '#fff'
        },
        areaStyle: {
          opacity: 0.2,
          color: 'yellow'
        },
        symbol: 'circle',
        symbolSize: 10,
        data: [
          [90, 19, 56, 11, 34]
        ]
      }]
    };

    myChart.setOption(option)
    window.addEventListener('resize', function() {
      myChart.resize()
    })

  })();

  // 7. 饼形图
  (function() {
    var myChart = echarts.init($('.gauge')[0])
    var option = {
      series: [{
        name: 'Access From',
        type: 'pie',
        radius: ['100%', '120%'],
        center: ['48%', '60%'],
        // avoidLabelOverlap: false,
        labelLine: {
          show: false
        },
        hoverOffset: 0,
        startAngle: 180,
        data: [{
            value: 37.5,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#006dc5' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00badb' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          { value: 12.5, itemStyle: { color: '#0d1d3d' } },
          { value: 50, itemStyle: { color: 'transparent' } }
        ]
      }]
    };

    myChart.setOption(option)

    window.addEventListener('resize', function() {
      myChart.resize()
    })
  })();

  // 8. 热销热榜
  (function() {
    var hotData = [{
        city: '北京', // 城市
        sales: '25, 179', // 销售额
        flag: true, //  上升还是下降
        brands: [ //  品牌种类数据
          { name: '可爱多', num: '9,086', flag: true },
          { name: '娃哈哈', num: '8,341', flag: true },
          { name: '喜之郎', num: '7,407', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '6,724', flag: false },
          { name: '好多鱼', num: '2,170', flag: true },
        ]
      },
      {
        city: '河北',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '3,457', flag: false },
          { name: '娃哈哈', num: '2,124', flag: true },
          { name: '喜之郎', num: '8,907', flag: false },
          { name: '八喜', num: '6,080', flag: true },
          { name: '小洋人', num: '1,724', flag: false },
          { name: '好多鱼', num: '1,170', flag: false },
        ]
      },
      {
        city: '上海',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '2,345', flag: true },
          { name: '娃哈哈', num: '7,109', flag: true },
          { name: '喜之郎', num: '3,701', flag: false },
          { name: '八喜', num: '6,080', flag: false },
          { name: '小洋人', num: '2,724', flag: false },
          { name: '好多鱼', num: '2,998', flag: true },
        ]
      },
      {
        city: '江苏',
        sales: '23,252',
        flag: false,
        brands: [
          { name: '可爱多', num: '2,156', flag: false },
          { name: '娃哈哈', num: '2,456', flag: true },
          { name: '喜之郎', num: '9,737', flag: true },
          { name: '八喜', num: '2,080', flag: true },
          { name: '小洋人', num: '8,724', flag: true },
          { name: '好多鱼', num: '1,770', flag: false },
        ]
      },
      {
        city: '山东',
        sales: '20,760',
        flag: true,
        brands: [
          { name: '可爱多', num: '9,567', flag: true },
          { name: '娃哈哈', num: '2,345', flag: false },
          { name: '喜之郎', num: '9,037', flag: false },
          { name: '八喜', num: '1,080', flag: true },
          { name: '小洋人', num: '4,724', flag: false },
          { name: '好多鱼', num: '9,999', flag: true },
        ]
      }
    ]

    // 1. 初渲染
    $.each(hotData, function(index, item) {
      var currentLi = `
      <li>
        <span>${item.city}</span>
        <span> ${item.sales} <s class="${item.flag ? 'icon-up' : 'icon-down'}"></s></span>
      </li>
      `
      $('.province .sup').append(currentLi)
    })

    // 2. 绑定鼠标经过事件

    function render(who) {
      who.addClass('active').siblings('li').removeClass('active')

      // 2-1: 找到当前城市
      var currentCity = hotData[who.index()]
      // 2-2: 照当点前城市对应的品牌信息
      var currentBrands = currentCity['brands']
      // 2-3: 拼接结构
      var lis = ''
      $.each(currentBrands, function(index, item) {
        lis += `
        <li>
          <span>${item.name}</span>
          <span> ${item.num} <s class="${item.flag ? 'icon-up' : 'icon-down'}"></s></span>
        </li>
        `
      })
      $('.province .sub').html(lis)
    }

    $('.province').on('mouseenter', 'li', function() {
      render($(this))
      // 修复bug
      index = $(this).index()
    })
    // 2-4: 默认经过第一个
    $('.province .sup li:first').mouseenter()

    // 3: 定时功能
    var index = 0
    var id

    function intervalHandle() {
      if (index >= $('.province .sup li').length) {
        index = 0
      }
      // $('.province .sup li').eq(index).mouseenter()
      render($('.province .sup li').eq(index))
      index += 1
    }

    id = setInterval(intervalHandle, 1000)

    // 4. 经过取消定时功能
    $('.province').hover(function() {
      if (id) {
        clearInterval(id)
        id = null
      } else {
        id = setInterval(intervalHandle, 1000)
      }
    })

  })();
})